<template>
  <div class="app-container">
    <el-row>
      <el-col
        v-for="(item, index) in list"
        :key="index"
        :lg="8"
        :md="8"
        :sm="8"
        style="padding: 6px"
        :xl="6"
        :xs="24"
      >
        <el-card :body-style="{ padding: '0' }" shadow="hover">
          <div class="goods-card-body">
            <div class="goods-tag-group">
              <el-tag v-if="+item.id === plant.crop_id" hit type="primary">
                当前选中
              </el-tag>
            </div>
            <el-button
              class="goods-button-group"
              type="success"
              @click="handleChecked(item)"
            >
              设为选中
            </el-button>
            <div class="goods-image-group">
              <div class="goods-image">
                <vab-icon v-if="item.icon" :icon="item.icon" />
                <el-image
                  v-if="item.picture || item.svg"
                  :class="{ isSvg: item.svg }"
                  fit="cover"
                  :src="item.picture || item.svg"
                />
              </div>
            </div>
            <div class="goods-title">{{ item.name }}</div>
            <div class="goods-description">
              {{ item.descri }}
            </div>
            <div class="h12"></div>
            <div class="goods-detail">
              <el-link
                class="mr12"
                icon="el-icon-edit"
                type="primary"
                @click="handleEdit(item)"
              >
                编辑
              </el-link>
              <el-link
                icon="el-icon-document"
                type="success"
                @click="handleDetail(item)"
              >
                详情
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <edit ref="edit" @getCrops="getCrops" />
    <detail ref="detail" />
  </div>
</template>

<script>
  import Edit from './components/edit'
  import Detail from './components/detail'
  import { getCrops } from '@/api/device'
  import { updateOne } from '@/api/plant'
  import { mapGetters } from 'vuex'
  export default {
    components: { Edit, Detail },
    data() {
      return {
        list: [
          {
            checked: 1,
            name: '小麦',
            description:
              '禾本科、小麦属一年或越年生草本草本植物。秆直立，丛生，高可达100厘米，叶鞘松弛包茎，叶舌膜质，叶片长披针形。穗状花序直立，小穗含多小花，颖卵圆形，外稃长圆状披针形，内稃与外稃几等长。花果期5-7月。',
            image: 'https://api.zesi.com.cn/storage/crop/xm.jpg',
            growthes: [
              { name: '生育期1', max: 60, min: 30, depth: 20, kunit: 0.9 },
              { name: '生育期2', max: 60, min: 30, depth: 20, kunit: 0.9 },
              { name: '生育期3', max: 60, min: 30, depth: 20, kunit: 0.9 },
              { name: '生育期4', max: 60, min: 30, depth: 20, kunit: 0.9 },
            ],
          },
        ],
      }
    },
    computed: {
      ...mapGetters(['plant']),
    },
    created() {
      this.getCrops()
    },
    methods: {
      async getCrops() {
        const {
          data: { data },
        } = await getCrops()
        this.list = data.filter((val) => {
          return val.name !== '苜蓿'
        })
      },
      handleEdit(row) {
        this.$refs.edit.show(row)
      },
      handleDetail(row) {
        this.$refs.detail.show(row)
      },

      handleChecked(row) {
        this.$baseConfirm('确定将该数据设为选中状态吗？', null, async () => {
          row.active = 1
          const { msg } = await updateOne(this.plant.id, { crop_id: row.id })
          this.$baseMessage(msg, 'success', 'vab-hey-message-success')
          this.$store.dispatch('device/getOneByProjectId')
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
